<template>
	<div class="flow-diagram-container">
		<!-- 动态流程图 - 基于groupsData -->
		<div class="vertical-workflow-chart" v-if="Object.keys(groupsData).length > 0">
			<!-- 动态生成各组节点 -->
			<div class="workflow-groups">
				<!-- 遍历每个组 -->
				<div v-for="(item, index) in Object.keys(groupsData.value)" :key="item" class="group-block">
					<!-- 组节点 - 颜色根据执行状态变化 -->
					<div class="node group-node pending-node">
						<div class="group-name">{{ item }}</div>
						<div class="actions-list">
							<div v-for="(actionName, actionIndex) in groupsData.value[item]" :key="actionIndex" class="action-item-container">
								<div class="action-item pending-action" :class="{
									'completed-action': actionName.actionPhase === 'Succeeded',
									'Failed-action': actionName.actionPhase === 'Failed',
									'running-action': actionName.actionPhase === 'Running',
									'pending-action': ['Pending', 'Unknown'].includes(actionName.actionPhase) || actionName.actionPhase === ''
								}">
									{{ actionName.text }}
								</div>
								<!-- 动作之间的箭头，最后一个动作不显示 -->
								<div class="action-arrow" v-if="actionIndex < groupsData.value[item].length - 1">
									<div style="width:0.2vh;height: 2vh;background-color: #fff;position: relative;" >
                    <div class="line-arrow">
                    </div>
                  </div>
									<!-- <svg width="12" height="">
										<path d="M6,0 L6,8 L3,8 L6,12 L9,8 L6,8" fill="none" stroke="#333" stroke-width="1.5" />
									</svg> -->
								</div>
							</div>
							<div v-if="groupsData.value[item].length === 0" class="no-actions">
								暂无动作
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 无数据时显示加载提示 -->
		<div v-else class="no-data-message">
			<div class="loading-spinner"></div>
			<div class="loading-text">加载工作流程图数据...</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted,
		reactive,
		computed,
		onUnmounted
	} from 'vue';
	import api from '../api/api';

	// 当前活动组和动作
	const activeGroup = ref(null);
	const activeAction = ref(null);
	// 已完成的动作列表
	const completedActions = ref([]);

	const groupResponse = ref([]);
    const actionList = ref([]);
	// 存储所有action的详细数据
	const actionsDetailList = ref([]);
	// 存储每个动作的执行状态 (Pending/Running/Successed)
	const actionPhases = ref({});
	// 定时更新状态的定时器
	let statusUpdateTimer = null;
	// 定时更新间隔(毫秒)
	const UPDATE_INTERVAL = 3000; // 5秒更新一次

	// 存储处理后的分组数据
	const groupsData = reactive({
		// 格式为: { "组描述": ["动作1描述", "动作2描述", ...] }
	});

	// 获取groupsData中组名的数组（顺序重要）
	const groupNames = computed(() => Object.keys(groupsData));

	// 判断节点是否已完成（在activeGroup之前的节点）
	const isNodeCompleted = (groupName, groupIndex) => {
		if (!activeGroup.value) return false;

		const activeIndex = groupNames.value.indexOf(activeGroup.value);
		return activeIndex > -1 && groupIndex < activeIndex;
	};

	// 判断节点是否待执行（在activeGroup之后的节点）
	const isNodePending = (groupName, groupIndex) => {
		if (!activeGroup.value) return true; // 如果没有activeGroup，所有节点都是待执行状态

		const activeIndex = groupNames.value.indexOf(activeGroup.value);
		return activeIndex > -1 && groupIndex > activeIndex;
	};

	// 判断动作是否已完成
	const isActionCompleted = (groupName, actionName) => {
		// 优先使用actionPhases中的状态
		if (actionPhases.value[actionName] === 'Successed') {
			return true;
		}

		// 如果没有在actionPhases中找到，使用旧的判断逻辑
		return completedActions.value.includes(actionName) ||
			(groupName !== activeGroup.value && isNodeCompleted(groupName, groupNames.value.indexOf(groupName)));
	};

	// 判断动作是否待执行
	const isActionPending = (groupName, actionName, groupIndex) => {
		// 优先使用actionPhases中的状态
		if (actionPhases.value[actionName] === 'Pending') {
			return true;
		}

		// 如果没有在actionPhases中找到，使用旧的判断逻辑
		// 如果不在当前组中，且组是待执行状态，则动作也是待执行状态
		if (groupName !== activeGroup.value && isNodePending(groupName, groupIndex)) {
			return true;
		}

		// 如果在当前组中，但不是当前动作，且未完成，则是待执行状态
		if (groupName === activeGroup.value && actionName !== activeAction.value && !completedActions.value.includes(
				actionName) && actionPhases.value[actionName] !== 'Running') {
			return true;
		}

		return false;
	};

	// 判断动作是否正在执行
	const isActionRunning = (actionName) => {
		return actionPhases.value[actionName] === 'Running';
	};

	// 修改获取动作状态的优先级，避免不必要的状态变化
	const getActionState = (groupName, actionName, groupIndex) => {
		const phase = actionPhases.value[actionName];
		if (phase === 'Successed') return 'completed';
		if (phase === 'Running') return 'running';
		if (phase === 'Pending') return 'pending';

		// 如果没有phase，使用默认逻辑
		if (isActionCompleted(groupName, actionName)) return 'completed';
		if (activeAction.value === actionName) return 'active';
		return 'pending';
	};

	// 添加props接收从TaskDistribution传递的itemData
	const props = defineProps({
		itemData: {
			type: Object,
			default: () => ({})
		},
		isGalaxea: {
			type: Boolean,
			default: false
		}
	});

	// 获取各组的动作数据
const getActionPhase = async (data) => {
    console.log('data获取各组动作:', data)
		// 清空actionList
		// actionList.value = [];

		// // 存储所有actions的Name和Namespace
		// const actionsData = [];

		// // 检查groupResponse是否包含数据
		// if (!Array.isArray(groupResponse.value) || groupResponse.value.length === 0) {
		// 	return [];
		// }
    Object.values(data).forEach(async el => {
        if (el.Name || el.Namespace) {
          const params = {
            Name: el.Name,
            Namespace: el.Namespace
          }
          const response = await api.getGroupsData({ params }, baseURL.value).catch(error => {
            console.error('获取组数据失败:', error);
          });
          if (response.data) {
            Object.values(groupsData.value).forEach(item => {
              item.forEach(el => {
                if (Object.keys(response.data.status.actions).includes(el.name)) {
                  el['actionName'] = response.data.status.actions[el.name]?.Name
                  el['actionNamespace'] = response.data.status.actions[el.name]?.Namespace
                }
              })
            })
          }
        }
    })
      // 根据actionName取每个节点的状态
     getActionsDetail()
		// 循环遍历groupResponse中的每一条数据
		// for (const group of groupResponse.value) {
		// 	// 确保group对象有name和namespace属性
		// 	if (!group || !group.Name || !group.Namespace) {
		// 		continue;
		// 	}

		// 	// 构建请求参数
		// 	const params = {
		// 		Name: group.Name,
		// 		Namespace: group.Namespace
		// 	};

		// 	try {
		// 		// 调用API获取该组的详细数据
		// 		const response = await api.getGroupsData({
		// 			params
		// 		}, baseURL.value);

		// 		// 将获取到的数据添加到actionList中
		// 		if (response.data) {
		// 			actionList.value.push(response.data);

		// 			// 从response.data.status.actions中提取Name和Namespace
		// 			// status.actions是一个对象，其中键是动作名称（如A1、A2），值是动作详情
		// 			if (response.data.status && response.data.status.actions) {
		// 				const actions = response.data.status.actions;

		// 				// 遍历对象的所有键
		// 				Object.keys(actions).forEach(actionKey => {
		// 					console.log('actionKey:', actionKey)
		// 					// 提取名称中的基本部分和后缀
		// 					const fullName = response.data.name;
		// 					const nameParts = fullName.split('-');
		// 					const basePart = nameParts[0]; // 例如 T1.G1
		// 					const suffix = nameParts.slice(1).join('-'); // 获取完整后缀: 20250419T173430-5a51a
		// 					// 正确构建action名称: T1.G1.A2-20250419T173430-5a51a 格式
		// 					const actionName = `${basePart}.${actionKey}-${suffix}`;
		// 					console.log('actionName:', actionName)
		// 					const actionData = {
		// 						Name: actionName,
		// 						Namespace: response.data.namespace
		// 					};
		// 					actionsData.push(actionData);
		// 					console.log(`提取动作: ${actionKey}, 构建名称: ${actionName}`);
		// 				});
		// 			}
		// 		}
		// 	} catch (error) {
		// 		console.error('获取组数据失败:', error);
		// 	}
		// }


		// // 获取每个action的详细数据
		// getActionsDetail(actionsData)
		// 	.then(() => {
		// 		// 获取完详细数据后，启动状态自动更新
		// 		startStatusUpdates();
		// 	});

		// return actionsData;
	}

	// 获取每个action的详细数据
const getActionsDetail = async () => {
	if (!groupsData.value ||Object.keys(groupsData.value).length === 0) {
		return
	}
    Object.values(groupsData.value).forEach(item => {
      item.forEach(async el => {
        if (el.actionName && el.actionNamespace) {
          let params = {
            Name: el.actionName,
            Namespace: el.actionNamespace
          }
          const response = await api.getActionsData({ params }, baseURL.value).catch(error => {
            console.error('获取组数据失败:', error);
          });
          if (response.data) {
            el['actionPhase'] = response.data.status.phase
						startStatusUpdates()
          }
        }
      })
		})
	}

	// 处理spec.groups数据，提取desc.docs,没有接口调用
	const processGroupsData = (data) => {
		if (!data || !data.spec || !data.spec.groups) {
			console.log('数据中没有spec.groups:', data);
			return {};
		}

		const result = {};
		const groups = data.spec.groups;
    groups.forEach(el => {
      if (el && el.desc && el.desc.docs) {
        result[el.desc.docs] = el.actions.map(item => {
          return {
            text: item.desc.docs,
            type: 'action',
            name:item.name
          }
        })
      }
    })
		return result;
	};

	// 根据传入的itemData进行处理
const processItemData = (data) => {
		if (!data) return;

		// 处理并提取分组数据
    groupsData.value = JSON.parse(JSON.stringify(processGroupsData(data)));

		// // 尝试从不同位置获取groups数据
		// let groupsArray = null;
		// if (Array.isArray(data.status?.groups)) {
		// 	groupsArray = data.status.groups;
		// } else if (data.status?.groups && typeof data.status.groups === 'object') {
		// 	// 如果groups是对象，转为数组
		// 	groupsArray = Object.values(data.status.groups);
		// } else if (data.spec?.groups && Array.isArray(data.spec.groups)) {
		// 	// 备选：从spec.groups获取
		// 	groupsArray = data.spec.groups;
		// }

		// // // 确保groupResponse是一个数组
    // groupResponse.value = groupsArray || []; //
		// console.log('设置后的groupResponse.value：', groupResponse.value);

		// // 更新reactive数据，用于UI展示
		// Object.keys(groupsData).forEach(key => {
		// 	delete groupsData[key];
		// });
		// Object.assign(groupsData, processedGroups);


		// // 确定当前活动的组和动作
		// determineActiveNodes(data);

  // 获取更详细的组动作数据
		if (data.status?.groups) {
			getActionPhase(data.status.groups);
		}
	};
	let isGalaxea = ref(false)
	let baseURL = ref('http://192.168.8.191:8899/framework/v1')

	// 监听itemData变化，更新流程图
	watch(() => props.itemData, (newVal) => {
		if (newVal) {
			processItemData(newVal);
			if (newVal && newVal.spec && newVal.spec.desc && newVal.spec.desc.docs) {
      if (newVal.spec.desc.docs === '星海图&乐聚的检测和抓取') {
				isGalaxea.value = true
				baseURL.value = 'http://192.168.8.191:8899/framework/v1'
      } else {
        isGalaxea.value = false
				baseURL.value = 'http://192.168.1.199:8899/framework/v1'
      }
		}
		}
	}, {
		deep: true,
		immediate: true
	});

	onMounted(() => {
		// 初始化处理数据
    processItemData(props.itemData);
    // 启动状态自动更新
    startStatusUpdates();
	});

	onUnmounted(() => {
		// 清理定时器
		stopStatusUpdates();
	});

	// 更新动作状态的方法
	const updateActionStatus = async () => {
		console.log('定时更新动作状态...');

		// 如果没有actionsData数据，则不执行更新
		if (actionsDetailList.value.length === 0) {
			console.log('没有动作数据，跳过状态更新');
			return;
		}

		// 保存当前状态以便比较变化
		const previousPhases = { ...actionPhases.value };

		// 构建actionsData数组用于请求
		const actionsData = actionsDetailList.value.map(action => ({
			Name: action.name,
			Namespace: action.namespace
		}));

		try {
			// 单独处理每个action，而不是一次获取所有
			for (const actionData of actionsData) {
				const params = {
					Name: actionData.Name,
					Namespace: actionData.Namespace
				};

				// 调用API获取最新状态
				const response = await api.getActionsData({ params }, baseURL.value);

				if (response.data && response.data.spec?.desc?.docs && response.data.status?.phase) {
					const actionName = response.data.spec.desc.docs;
					const phase = response.data.status.phase;

					// 仅当状态有变化时更新
					if (actionPhases.value[actionName] !== phase) {
						console.log(`动作 [${actionName}] 状态变化: ${actionPhases.value[actionName] || '未知'} -> ${phase}`);
						actionPhases.value[actionName] = phase;

						// 处理状态变化的逻辑
						if (phase === 'Running') {
							activeAction.value = actionName;
							// 找到所属组并设置为活动组
							// 这部分逻辑可以保留不变...
						} else if (phase === 'Successed' && !completedActions.value.includes(actionName)) {
							completedActions.value.push(actionName);
						}
					}
				}
			}
		} catch (error) {
			console.error('更新动作状态失败:', error);
		}
	};

	// 启动定时更新
	const startStatusUpdates = () => {
		// 先清除可能存在的旧定时器
		if (statusUpdateTimer) {
			clearInterval(statusUpdateTimer);
		}

		// 设置新的定时器，定期调用updateActionStatus
		statusUpdateTimer = setInterval(getActionsDetail, UPDATE_INTERVAL);
		console.log(`已启动状态自动更新，间隔: ${UPDATE_INTERVAL/1000}秒`);
	};

	// 停止定时更新
	const stopStatusUpdates = () => {
		if (statusUpdateTimer) {
			clearInterval(statusUpdateTimer);
			statusUpdateTimer = null;
			console.log('已停止状态自动更新');
		}
	};
</script>

<style scoped>
	.flow-diagram-container {
		width: 100%;
		height: 100%;
		min-height: 20vh;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 4px;
		overflow-y: auto;
		background: none;
		border-radius: 0;
		border: none;
	}

	/* 垂直流程图样式 */
	.vertical-workflow-chart {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		border: none;
	}

	/* 节点基本样式 */
	.node {
		padding: 0.6vh 1vh;
		border-radius: 4px;
		color: white;
		text-align: center;
		font-size: 1.2vw;
		font-weight: 500;
		min-width: 10vh;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
		position: relative;
	}

	/* 组节点容器 */
	.workflow-groups {
		display: flex;
		flex-direction: column;
		align-items: center;
    gap: 2vh;
		width: 100%;
	}

	/* 组块 - 包含节点和箭头 */
	.group-block {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-bottom: 1px;
		border: none;
	}

	/* 组节点基础样式 - 透明背景 */
	.group-node {
		background-color: transparent;
		border: 1px solid #fff;
		width: 60%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0.6vh 0.8vh;
		transition: all 0.3s ease;
		color: #fff; /* 文字颜色改为深色，因为背景是透明的 */
		text-align: left; /* 组名文本左对齐 */
	}
  .group-name{
    font-size: 1.2vw;
    color: #fff;
    font-weight: 500;
    margin-bottom: 1vh;
  }

	/* 已完成节点样式 - 透明背景 */
	.completed-node {
		background-color: transparent;
		border: 1px solid rgba(0, 0, 0, 0.15);
	}

	/* 活动节点样式 - 透明背景，添加细微边框效果 */
	.active-node {
		background-color: transparent;
		border: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow: none;
	}

	/* 等待执行节点样式 - 透明背景 */
	.pending-node {
		background-color: transparent;
		border: 1px solid rgba(255, 255, 255, 0.4)  ;
	}

	/* 动作列表 */
	.actions-list {
		margin-top: 4px;
		background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8vh;
		border-radius: 3px;
		padding: 3px;
		width: 90%;
		align-self: center; /* 让动作列表在组节点中居中 */
	}
	/* 待执行动作 - 灰色 */
	.pending-action {
		background-color: rgba(191, 191, 191, 0.7);
	}
	/* 动作项容器 - 包含动作和箭头 */
	.action-item-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 2px;
		width: 100%;
	}

	/* 动作项基础样式 */
	.action-item {
		width: 100%;
		color: #fff;
		font-size: 1vw;
		padding: 0.2vh 0.4vh;
		border-radius: 2px;
		text-align: center;
		transition: all 0.3s ease;
	}

	/* 动作之间的箭头 */
	.action-arrow {
		margin: 2px 0;
		height: 12px;
		display: flex;
		justify-content: center;
	}
  .line-arrow{
   border-left: 0.8vh solid transparent;
    border-right: 0.8vh solid transparent;
    border-top: 0.8vh solid #fff;
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translate(-50%, -50%);

  }

	/* 已完成动作 - 绿色 */
	.completed-action {
		background-color: #67c23a;
	}

	/* 活动动作 - 红色 */
	.Failed-action {
		background-color: #f56c6c;
		font-weight: bold;
		/* box-shadow: 0 0 4px rgba(245, 34, 45, 0.6); */
	}

	/* 正在执行的动作 - 红色，静态效果，不闪烁 */
	.running-action {
		background-color: #e6a23c; /* 与active-action完全相同 */
		font-weight: bold;
		/* box-shadow: 0 0 4px rgba(245, 34, 45, 0.6); */
	}




	/* 无动作提示 */
	.no-actions {
		color: #999;
		font-size: 1vw;
		font-style: italic;
		text-align: center;
		padding: 2px;
	}

	/* 箭头 */
	.arrow-down {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 1.6vh;
		margin: 1px 0;
	}

	/* 无数据提示 */
	.no-data-message {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 12vh;
		width: 100%;
		color: #999;
		font-style: italic;
	}

	/* 加载状态样式 */
	.loading-spinner {
		border: 3px solid #f3f3f3;
		border-top: 3px solid #bfbfbf;
		border-radius: 50%;
		width: 2.4vh;
		height: 2.4vh;
		animation: spin 1s linear infinite;
		margin-bottom: 0.8vh;
	}

	.loading-text {
		font-size: 1.2vw;
		color: #fff;
	}
::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	::-webkit-scrollbar-track {
		background: #f1f1f1;
		border-radius: 3px;
	}

	::-webkit-scrollbar-thumb {
		background: #ccc;
		border-radius: 3px;
	}

	::-webkit-scrollbar-thumb:hover {
		background: #999;
	}
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
</style>